import 'package:card_topia/common_provider/user_provider.dart';
import 'package:card_topia/common_widget/my_scaffold.dart';
import 'package:card_topia/design_specifications.dart';
import 'package:card_topia/pages/home_page/recommend_page/recommend_page.dart';
import 'package:card_topia/utils/shared_preference_util.dart';
import 'package:ficonsax/ficonsax.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class ChowkPage extends StatefulWidget {
  const ChowkPage({super.key});

  @override
  State<ChowkPage> createState() => _ChowkPageState();
}

class _ChowkPageState extends State<ChowkPage> with TickerProviderStateMixin {
  final _kingList = [
    {"src": "assets/rank.png", "text": "排行榜"},
    {"src": "assets/rank.png", "text": "交易区"},
    {"src": "assets/rank.png", "text": "专题区"},
    {"src": "assets/rank.png", "text": "活动专区"},
    {"src": "assets/rank.png", "text": "更多"},
  ];
  late final TabController _tabController;
  final _tabs = ["推荐","黑色四叶草","三国演义","水浒传","游戏王","花千骨","英雄联盟"];
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _tabController = TabController(length: _tabs.length, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Consumer(
      builder: (context, ref, child) => Scaffold(
        resizeToAvoidBottomInset: false,
        appBar: AppBar(
          backgroundColor: Colors.transparent,
          elevation: 0,
          systemOverlayStyle: SystemUiOverlayStyle.dark,
          title: Container(
            height: 40.w,
            decoration: BoxDecoration(
                color: blankColor, borderRadius: BorderRadius.circular(4.w)),
            padding: EdgeInsets.symmetric(horizontal: 16.w),
            child: Row(
              children: [
                Icon(
                  IconsaxOutline.search_normal_1,
                  color: descColor,
                  size: 18.w,
                ),
                SizedBox(
                  width: 8.w,
                ),
                Expanded(
                    child: Text(
                  "游戏王十周年盲盒",
                  style: TextStyle(
                      fontSize: 14.sp, color: descColor, fontFamily: harmony),
                )),
                Text(
                  "搜索",
                  style: TextStyle(
                      fontSize: 14.sp,
                      color: textColor,
                      fontFamily: harmony,
                      fontWeight: FontWeight.bold),
                )
              ],
            ),
          ),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // Container(
            //   margin: EdgeInsets.only(left: 16.w, right: 16.w, top: 8.w),
            //   child: Row(
            //     mainAxisAlignment: MainAxisAlignment.spaceBetween,
            //     children: _kingList
            //         .map((e) => KingItem(text: e['text']!, src: e['src']!))
            //         .toList(),
            //   ),
            // ),
            // Container(
            //   height: 110.w,
            //   width: double.infinity,
            //   decoration: BoxDecoration(
            //     borderRadius: BorderRadius.circular(8.w)
            //   ),
            //   margin: EdgeInsets.only(left: 16.w,right: 16.w,top: 16.w,bottom: 8.w),
            //   child: ClipRRect(
            //       borderRadius: BorderRadius.circular(8.w),
            //       child: Image.asset("assets/banner.png",fit: BoxFit.cover,)),
            // ),
            Stack(
              alignment: Alignment.centerRight,
              children: [
                TabBar(
                  controller: _tabController,
                  isScrollable: true,
                  unselectedLabelColor: unSelectColor,
                  unselectedLabelStyle:
                  TextStyle(fontSize: 14.sp, fontFamily: harmony),
                  labelColor: textColor,
                  labelStyle: TextStyle(fontSize: 14.sp, fontFamily: harmony,fontWeight: FontWeight.bold),
                  indicatorColor: textColor,
                  indicatorSize: TabBarIndicatorSize.label,
                  indicatorWeight: 4.w,
                  indicatorPadding: EdgeInsets.symmetric(horizontal: 10.w),
                  padding: EdgeInsets.only(right: 60.w),
                  tabs: _tabs.map((e) => TabBarItem(text: e)).toList(),
                ),
                Positioned(
                    right: 0,
                    top: 0,
                    bottom: 0,
                    child: Container(
                        // height: 42.w,
                        width: 50.w,
                        decoration: BoxDecoration(
                          gradient: LinearGradient(
                            colors: [
                              scaffoldBackgroundColor.withOpacity(0.1),
                              scaffoldBackgroundColor.withOpacity(0.9),
                              scaffoldBackgroundColor
                            ],
                            stops: const [0.1,0.1,0.6]
                          )
                        ),
                        alignment: Alignment.center,
                        child: Icon(Icons.menu_open_rounded,color: subTextColor,)))
              ],
            ),
            Expanded(
              child: TabBarView(
                  controller: _tabController,
                  children: [
                RecommendPage(),
                Center(
                  child: Text("1"),
                ),
                Center(
                  child: Text("1"),
                ),
                Center(
                  child: Text("1"),
                ),
                Center(
                  child: Text("1"),
                ),
                Center(
                  child: Text("1"),
                ),
                Center(
                  child: Text("1"),
                ),

              ]),
            )
          ],
        ),
      ).withOnTap(context),
    );
  }
}

///金刚区item
class KingItem extends StatelessWidget {
  const KingItem({super.key, required this.text, required this.src});

  final String text;
  final String src;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Image.asset(
          src,
          width: 48.w,
        ),
        SizedBox(
          height: 8.w,
        ),
        Text(
          text,
          style: TextStyle(
              fontSize: 12.sp, fontFamily: harmony, color: subTextColor),
        )
      ],
    );
  }
}

///TabBarItem
class TabBarItem extends StatelessWidget {
  const TabBarItem({super.key, required this.text});
  final String text;
  @override
  Widget build(BuildContext context) {
    return Container(
        height: 32.w,
        alignment: Alignment.bottomCenter,
        padding: EdgeInsets.symmetric(horizontal: 4.w,vertical: 6.w),
        child: Text(
          text,
          style:
          TextStyle(fontSize: 14.sp, fontFamily: harmony),
        ));
  }
}
